<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交订单-青鸟优品</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/order.css">
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="./assets/js/common.js"></script>
    <script src="./assets/layer/layer.js"></script>
    <!-- 
        商品素材来自京东
        https://new.jd.com/?innerAnchor=100011386594_100012254352_100006378137_100011529848&focus=1 
    -->
</head>

<body>

    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">青鸟商城</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <!-- <li class="active"><a href="./list.html">热门推荐 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">国际品牌</a></li>
                    <li><a href="#">数码电器</a></li>
                    <li><a href="#">每日特价</a></li> -->
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./login.html">登录</a></li>
                    <li><a href="./reg.html">注册</a></li>
                </ul>

            </div>
        </div>
    </nav>

    <div class="container order">
        <div class="table-responsive" style="background-color: #FFF;">
            <table class="table">
                <thead>
                    <tr>
                        <td width="40%">商品</td>
                        <td width="30%">单价</td>
                        <td width="30%">数量</td>
                    </tr>
                </thead>
                <tbody>
                    <tr class="cart-item">
                        <td><img src="./uploads/01.png" alt=""></td>
                        <td><b>&yen; 999.90</b></td>
                        <td>2</td>
                    </tr>
                </tbody>

            </table>
        </div>
        <form>
            <div class="form-group">
                <label for="consingee">选择收货信息</label>
                <!-- 如果已经添加收货地址, 则选择 -->
                <select class="form-control receive-option">
                    <option value="">--请选择收货地址--</option>
                </select>
                <!-- 否则新增收货地址 -->
                <!-- <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    新增收货地址
                </button> -->
            </div>
            <hr />
            <div class="receive-info">
                <div class="form-group">
                    <label for="consignee">收货人</label>
                    <input type="text" class="form-control" id="consignee" placeholder="收货人">
                </div>
                <div class="form-group">
                    <label for="tel">联系电话</label>
                    <input type="text" class="form-control" id="tel" placeholder="联系电话">
                </div>
                <div class="form-group city3">
                    <label for="province">收货地址</label>
                    <select name="province" id="province" class="form-control">
                        <option value="">--请选择省份--</option>
                    </select>
                    <select name="city" id="city" class="form-control">
                        <option value="">--请选择城市--</option>
                    </select>
                    <select name="county" id="county" class="form-control">
                        <option value="">--请选择区县--</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="address">详细地址</label>
                    <input type="text" class="form-control" id="address" placeholder="详细地址">
                </div>
            </div>
            <div class="form-group">
                <label for="tel">支付方式</label>
                <button type="button" class="pay-way" payway="2">货到付款</button>
                <button type="button" class="pay-way" payway="1">在线支付</button>
            </div>
            <div class="form-group clearfix">
                <button type="button" id="btn-order" class="btn btn-danger btn-lg btn-order pull-right">立即下单</button>
            </div>
        </form>
    </div>


    <div class="container-fluid footer">
        <div class="row">
            <div class="col-lg-12">
                Copyright 2019 by www.braccp.com 北京畅想唯优信息技术有限公司 All rights reserved.
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                联系电话：029-88212666 地址：西安市雁塔区电子一路 石油大学北门工会楼二层
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                备案号：陕ICP备19013769号-1
            </div>
        </div>
    </div>

    <div class="fixed-nav-right">
        <!-- 返回首页 -->
        <div class="fixed-home">
            <a href="./index.html">
                <i class="glyphicon glyphicon-home"></i>
            </a>
        </div>
        <!-- 购物车 -->
        <div class="fixed-cart">
            <a href="./cart.html">
                <i class="glyphicon glyphicon-shopping-cart"></i>
            </a>
        </div>
        <!-- 返回顶部 -->
        <div class="back-top">
            <i class="glyphicon glyphicon-chevron-up"></i>
        </div>
    </div>

</body>
<script src="./assets/js/city-data.js"></script>
<script src="./assets/js/addr.js"></script>
<script src="./assets/js/ucenter.js"></script>
<script>
    // 校验登录凭证
    auth();
    // 拦截用户直接访问此页面
    var cart = JSON.parse(localStorage.getItem('cart') || '[]');
    // 购物车中没有商品
    if (cart.length === 0) {
        location.href = '/cart.html'
    }
    // 保存用户选择的商品
    var cartChecked = [];
    var trs = '';
    // 假设购物车中所有的商品都没有勾选状态
    var flag = false;
    cart.forEach(item => {
        if (item.checked && item.checked === 1) {
            cartChecked.push(item);
            flag = true;
            trs += `<tr class="cart-item">
                    <td><img src="${item.cover}" alt="">&nbsp;${item.name}</td>
                    <td><b class="price">&yen; ${item.price}</b></td>
                    <td>${item.num}</td>
                </tr>`;
        }
    });
    if (!flag) {
        location.href = '/cart.html';
    }
    // 渲染用户勾选的购物车商品列表
    $("tbody").html(trs);

    // 获取用户的收货地址
    $.ajax({
        url: '/apis/index.php?c=address&a=list',
        dataType: 'json',
        headers: {
            Token: localStorage.getItem('token')
        }
    }).then(res => {
        if (res.errcode === 0) {
            var options = '<option value="">--请选择收货地址--</option>';
            res.data.forEach(item => {
                options += `<option value="${item.id}">${item.consignee}-${item.tel}</option>`
            });
            // 将收货地址渲染到页面上
            $(".receive-option").html(options);
        }
    });




    // 选择收货信息
    $(".receive-option").on('change', function () {
        // 设置收货地址表单的值
        $.ajax({
            url: '/apis/index.php?c=address&a=get',
            data: { id: $(this).val() },
            dataType: 'json',
            headers: {
                Token: localStorage.getItem('token')
            }
        }).then(res => {
            console.log(res);
            if (res.errcode === 0) {
                $("#consignee").val(res.data.consignee);
                $("#tel").val(res.data.tel);
                $("#address").val(res.data.address);
                // 初始化省市区三级联动
                cityInit({
                    province: res.data.province,
                    city: res.data.city,
                    county: res.data.county,
                });
            }
        });
        // 显示收货地址的表单
        $(".receive-info").show();

    });
    // 付款方式
    $(".pay-way").on('click', function () {
        $(".pay-way").removeClass('plain-active');
        $(this).addClass('plain-active');
    });

    // 提交订单
    $("#btn-order").on('click', function () {
        var postData = {};
        // 收集收货地址信息
        postData.consignee = $("#consignee").val().trim();
        postData.tel = $("#tel").val().trim();
        postData.province = $("#province option:selected").attr('provincename');
        postData.city = $("#city option:selected").attr('cityname');
        postData.county = $("#county option:selected").attr('countyname');
        postData.address = $("#address").val().trim();
        if (postData.consignee === '') {
            return layer.msg('请输入收货人');
        }
        if (postData.tel === '' || postData.tel.length !== 11) {
            return layer.msg('请输入11位的手机号码');
        }
        if (postData.province === '') {
            return layer.msg('请选择省份');
        }
        if (postData.city === '') {
            return layer.msg('请选择城市');
        }
        if (postData.county === '') {
            return layer.msg('请选择区县');
        }
        if (postData.address === '') {
            return layer.msg('请输入详细收货地址');
        }
        // 收集付款方式信息
        if ($(".plain-active").length === 0) {
            return layer.msg('请选择付款方式');
        } else {
            postData.pay_way = $(".plain-active").attr('payway');
        }
        // 收集购物车信息
        var list = [];
        cartChecked.forEach(item => {
            var remark = item.color + ';' + item.mode;
            list.push({
                product_id: item.id,
                product_num: item.num,
                remark
            });
        });
        postData.order_items = JSON.stringify(list);
        // 发送请求
        $.ajax({
            url: '/apis/index.php?c=order&a=add',
            type: 'POST',
            data: postData,
            dataType: 'json',
            headers: {
                Token: localStorage.getItem('token')
            }
        }).then(res => {
            // console.log(res);
            if (res.errcode === 0) {
                layer.msg('下单成功');
                // 删除购物车中已经购买的商品:[1,2,3]
                var productIds = [];
                cartChecked.forEach((item) => {
                    productIds.push(item.id);
                });
                // cart.forEach((item,index)=>{
                //     if(productIds.indexOf(item.id)!==-1){
                //         cart.splice(index,1);
                //     }
                // });
                for (var i = cart.length - 1; i >= 0; i--) {
                    if (productIds.indexOf(cart[i].id) !== -1) {
                        cart.splice(i, 1);
                    }
                }
                // 更新购物车信息
                localStorage.setItem('cart', JSON.stringify(cart));
                // 进行页面重定向
                location.href = "/order-list.html"
            } else {
                layer.msg('下单失败, 请稍后重试')
            }
        });
    });


</script>

</html>